<template>
	<div style="height: 100%; overflow: auto;background-color: papayawhip;">
		<div class="weui-panel">
			<div class="weui-panel__hd">
				<div class="weui-cell" style="padding: 0.5rem 0.5rem 0.3125rem;width: 100%;">
					<select class=" sel wd" name="public-choice">
						<option value="">全部类型</option>
						<option value="1">瑜伽课</option>

					</select>
					<select class="sel wd" style="margin-left: 1rem;" name="public-choice">
						<option value="coupon">全部老师</option>
						<option value="account1">张三</option>
						<option value="account2">李四</option>
					</select>
					<select class="sel wd" style="margin-left: 1rem;" name="public-choice">
						<option value="coupon">全部价格</option>
						<option value="value1"> &lt;100</option>
						<option value="value2">100 &lt; 300</option>
						<option value="value2">&gt; 300</option>
					</select>
				</div>
			</div>
			<div class="weui-cells">
				<div class="weui-cell" v-for="(item,index) in staffCases">
					<div class="weui-media-box__hd hw">
						<img class="weui-media-box__thumb imw" :src="item.caseImgPath" alt="">
					</div>
					<div class="weui-media-box__bd " style="width: 50%;" @click="goShopping(item.caseNo,item.caseType)">
						<h5 class="weui-media-box__title">{{item.caseName}}</h5>
						<p class="weui-media-box__desc">{{item.caseShowDesc}}</p>
						<p class="weui-media-box__desc">
							￥<span style="text-decoration: line-through;color: #585858;">{{item.caseSale}}</span>
							￥：<span style="color: #ce0b0e;">{{item.caseSaleDz}}</span>
						</p>

					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import uwLoadJs from '@/utils/uwLoad'
	import constant from '@/utils/constant'
	import apis from '@/utils/apis'
	import {
		getCaseList
	} from '@/apis/wx/weixinJs.js'
	export default {
		name: "classCenter",
		data() {
			return {
				account: "",
				staffCases: [],
			}
		},
		created() {
			this.getStaffList();
		},
		methods: {
			getStaffList(){
				this.staffCases = [];
				this.$showLoading({
					showLoadingToastFlag: true,
				});
				let url = apis.getWxCaseList + "?account=" + this.account;
				getCaseList(url).then(res => {
					if (res.resultCode == constant.SUCCESS && res.data != null) {
						this.staffCases = res.data;
						this.staffCases.forEach(item => {
							if (item.caseDesc.length > 8) {
								item['caseShowDesc'] = item.caseDesc.substring(0, 5) + '...';
							} else {
								item['caseShowDesc'] = item.caseDesc;
							}
						})
					}
					this.$hideLoading();
				}).catch(err => {
					this.$hideLoading();
				})
			},
			goShopping(caseNo,caseType){
				this.$router.push({name:"wxCaseDetail",params:{caseNo:caseNo,caseType:caseType}})
			}
		}
	}
</script>

<style>
	.hw {
		width: 35%
	}

	.imw {
		width: 100%;
	}
	.sel {
		-webkit-appearance: none;
		border: 0;
		outline: 0;
		background-color: transparent;
		font-size: inherit;
		/* height: 56px; */
		/* line-height: 56px; */
		position: relative;
		z-index: 1;
		padding-left: 1rem;
		width: 30%;
	}
</style>
